<template>
    <div class="form">
        <el-form label-width="auto" :rules="formRules" ref="formRef" :model="deviceAccessControl">
            <el-form-item label="设备类型" prop="deviceType">
                <el-input type="tel" v-model="deviceAccessControl.deviceTypee" placeholder="请输入" ></el-input>
            </el-form-item>
            <el-form-item label="设备名称" prop="deviceName">
                <el-input type="tel" v-model="deviceAccessControl.deviceName" placeholder="请选择"></el-input>
            </el-form-item>
            <el-form-item label="设备方向" prop="direction">
                <el-input type="tel" v-model="deviceAccessControl.direction" placeholder="请选择"></el-input>
            </el-form-item>
            <el-form-item label="版本号" prop="version">
                <el-input type="tel" v-model="deviceAccessControl.version" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="设备位置" prop="deviceLocation">
                <el-input type="tel" v-model="deviceAccessControl.deviceLocation" placeholder="请填写位置"></el-input>
            </el-form-item>           
            <el-form-item label="设备ip" prop="deviceIp">
                <el-input type="tel" v-model="deviceAccessControl.deviceIp" placeholder="选填"></el-input>
            </el-form-item>
            <el-form-item label="设备MAC">
                <el-input type="tel" v-model="deviceAccessControl.deviceAMC" placeholder="选填/设备MAC"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="save(formRef)">保存</el-button>
                <el-button type="info" @click="cancel">取消</el-button>
            </el-form-item>
        </el-form>
    </div>

</template>
<script setup>
import http from '../utils/http'
import { ref } from 'vue'
import { ElMessageBox } from 'element-plus'
import { useRouter } from 'vue-router';
import { onBeforeMount } from 'vue';
import DeviceAccessControl from './DeviceAccessControl.vue';
let router = useRouter()
const size = ref<'default' | 'large' | 'small'>('default')
const options = [
    {
        value: '抢单',
        label: '抢单',
    },
    {
        value: '指派',
        label: '指派',
    },
    {
        value: '轮训',
        label: '轮训',
    }
]
let deviceAccessControl = ref({
    id: router.currentRoute.value.query.id,
    deviceTypee: '',
    deviceName: '',
    direction: '',
    version: '',
    deviceLocation: '',
    deviceIp: '',
    deviceAMC: ''
})
let formRef = ref(null)//单表dom对象
let formRules = {
    version: [
        { required: true, message: '请输入版本号', trigger: 'blur' },
],
deviceName:[
        { required: true, message:'请输入设备名称', trigger:'blur'},
],
direction:[
    { required: true, message: '请输入设备方向', trigger: 'blur' },
],
deviceLocation:[
    {required:true, message:'请输入设备位置', trigger:'blur'},
],
deviceIp:[
{required:true, message:'请输入设备ip', trigger:'blur'},
]
}
onBeforeMount(async () => {
    if (deviceAccessControl.value.id) {
        let resp = await http.get(`/deviceAccessControl/get/${deviceAccessControl.value.id}`)
        deviceAccessControl.value = resp.data
    }
})
async function save(formRef) {
    formRef.validate(async function (valid) {
        if(valid){
    let path = deviceAccessControl.value.id ? '/deviceAccessControl/update' : '/deviceAccessControl/add'
    let tip = deviceAccessControl.value.id ? '修改' : '保存'
    let resp = await http.post(path,deviceAccessControl.value)
    if (resp.code == 200) {
        ElMessageBox.alert(tip + '账户成功', tip + '账户', {
            confirmButtonText: 'OK'
        })
        router.go(-1)
    } else {

         }
      }
    })
}
function cancel() {
    router.go(-1)
}

</script>
<style lang="css" scoped>
.form {
    width: 400px;
    margin: 0 auto;
}

.el-form-item__label {
    width: 120px;
}
</style>